<!-- 我的收藏 -->
<template>
  <div>
    <van-nav-bar
      fixed placeholder
      title="我的收藏"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="collectInfo" v-for="item in collectList" :key="item.goodsId">
      <van-swipe-cell>
        <van-card
          :price="item.goodsPrice"
          tag="3人团"
          centered
          :title="item.goodsName"
          :desc="item.goodsDesc"
          class="goods-card"
          :thumb="'http://172.17.4.241:8887/upload/'+item.goodsImg"
        />
        <template #right>
          <van-button square text="取消收藏" type="danger" class="delete-button" @click="cancelCollect(item.goodsId)"/>
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
export default {
  name:'collect',
  data () {
    return {
      userId:'',
      collectList:[]
    }
  },
  created(){
    this.userId=JSON.parse(sessionStorage.getItem('user')).userId
    this.getCollect()
  },
  methods:{
    cancelCollect(v){
      this.$axios.post('/api/collection/cancel?goodsId='+v+"&userId="+this.userId).then(res=>{
        // console.log(res)
        if(res.data.code==200){
          if(res.data.data==null){
            this.$toast({
              message:res.data.msg,
              icon:'smile-o'
            })
          }
          this.$toast.success(res.data.msg)
          this.getCollect()
        }else{
          this.$toast.fail(res.data.msg)
        }
      })
    },
    getCollect(){
          this.$axios.post('/api/collection/list?userId='+this.userId).then(res=>{
            console.log(res)
            if(res.data.code==200){
               this.collectList=res.data.data
            }

        })
    },
    onClickLeft(){
      this.$router.push('/my')
    },
  }
}
</script>

<style  scoped>
  div /deep/ .van-nav-bar .van-icon{
    color: #333;
  }
   .goods-card {
    margin: 10px auto;
    border-radius: 10px;
    width: 95%;
    background-color: white;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
  .van-card{
    text-align: left;
  }
  .van-card__title{
    font-size: 14px;
    padding-bottom: 10px;
  }
  .van-card__content{
    padding-left: 10px;
  }
  .delete-button {
    height: 100%;
    margin-left: 2px;
  }
</style>
